{% extends 'base/base.html' %}
{% block title %}数据库字典{% endblock %}
{% block stylesheets %}
    {% load  staticfiles %}
    {{ block.super }}
    <link rel="stylesheet" href="/static/vendors/bootstrap-select/css/bootstrap-select.min.css">
    <link href="/static/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendors/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">
{% endblock stylesheets %}
{% block content %}

    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>数据库字典</h3>
                </div>
            </div>

            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>数据库上线
                                <small>请按照执行规范提交</small>
                            </h2>
                            <ul class="nav navbar-right panel_toolbox" >
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>

                        <div class="x_content">
                            <form class="form-horizontal form-label-left" action="#"
                                  method="post">
                                {% csrf_token %}
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">选择数据库
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-md-8 col-sm-6 col-xs-12">
                                        <select class="form-control selectpicker col-md-8 col-xs-12" id="id_db_select"
                                                required
                                                name="db_id" data-live-search="true">
                                            <option value="">-----选择数据库------</option>
                                            {% for each in record_list %}
                                                <option data-subtext="{{ each.db_ip }}" value="{{ each.id }}">{{ each.db_name }}</option>
                                            {% endfor %}

                                        </select>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">选择表
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-md-8 col-sm-6 col-xs-12">
                                        <select class="form-control selectpicker col-md-7 col-xs-12" required
                                                id="id_table_select"
                                                name="table_name"
                                                data-live-search="true">
                                            <option value="">-----选择表------</option>

                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                        <input class="btn btn-success" type="submit" value="提交">
                                        <input class="btn btn-primary" type="reset" value="重置">
                                    </div>
                                </div>
                                <br/>
                            </form>
                        </div>

                    </div>
                </div>
                {% if data %}

                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2 style="color: red">table_columns 【表：{{ table_name }}】
                                </h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>

                            <div class="x_content">
                                <table id="datatable" class="table table-striped table-bordered"
                                       style="background-color: #f3f3f3">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">COLUMN_NAME</th>
                                        <th style="text-align: center">COLUMN_DEFAULT</th>
                                        <th style="text-align: center">IS_NULLABLE</th>
                                        <th style="text-align: center">COLUMN_TYPE</th>
                                        <th style="text-align: center">COLUMN_COMMENT</th>
                                        <th style="text-align: center">COLUMN_KEY</th>
                                        <th style="text-align: center">EXTRA</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {% for list in data.table_columns %}
                                        <tr>
                                            <td align="center">{{ list.COLUMN_NAME }}</td>
                                            <td align="center">{{ list.COLUMN_DEFAULT }}</td>
                                            <td align="center">{{ list.IS_NULLABLE }}</td>
                                            <td align="center">{{ list.COLUMN_TYPE }}</td>
                                            <td align="center">{{ list.COLUMN_COMMENT }}</td>
                                            <td align="center">{{ list.COLUMN_KEY }}</td>
                                            <td align="center">{{ list.EXTRA }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>

                            </div>

                        </div>
                    </div>


                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2 style="color: red">table_status
                                </h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>

                            <div class="x_content" id="id_table_status_div">
                                <table id="table_status">
                                    <thead>
                                    <tr>
                                        <th data-field="key" class="key">Key</th>
                                        <th data-field="value">Value</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2 style="color: red">table_index
                                </h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>

                            <div class="x_content">
                                <table id="datatable" class="table table-striped table-bordered"
                                       style="background-color: #f3f3f3">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">Key_Name</th>
                                        <th style="text-align: center">Type</th>
                                        <th style="text-align: center">Unique</th>
                                        <th style="text-align: center">Colume</th>
                                        <th style="text-align: center">Cardinnality</th>
                                        <th style="text-align: center">Collation</th>
                                        <th style="text-align: center">Null</th>
                                        <th style="text-align: center">Comment</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {% for list in data.table_index %}
                                        <tr>
                                            <td align="center">{{ list.INDEX_NAME }}</td>
                                            <td align="center">{{ list.INDEX_TYPE }}</td>
                                            <td align="center">{{ list.IS_UNIQUE }}</td>
                                            <td align="center">{{ list.COLUMN_NAME }}</td>
                                            <td align="center">{{ list.CARDINALITY }}</td>
                                            <td align="center">{{ list.COLLATION }}</td>
                                            <td align="center">{{ list.NULLABLE }}</td>
                                            <td align="center">{{ list.INDEX_COMMENT }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>

                            </div>

                        </div>
                    </div>

                {% endif %}

            </div>
        </div>
    </div>


{% endblock %}
{% block javascripts %}
    {{ block.super }}
    <script src="/static/custom/js/custom_new.js"></script>
    <script src="/static/vendors/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="/static/vendors/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="/static/vendors/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>

    <script>

        function refresh_table(async = true) {

            var table = $('#id_table_select');

            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'get_table_list' %}",
                data: {
                    'db_id': $('#id_db_select ').val(),
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                async: async,
                dataType: 'json',
                beforeSend: function (xhr, settings) {
                },
                success: function (data) {

                    data_table = data.table_list;
                    console.log(data_table);
                    for (var i = 0; i < data_table.length; i++) {
                        var tmp_node = "<option value='" + data_table[i] + "' >" + data_table[i] + "</option>";
                        table.append($(tmp_node))
                    }
                    $('#id_table_select').selectpicker('refresh');
                    $('#id_table_select').selectpicker('render');
                }
            });
        }

        $(document).ready(function () {
            init_selectpicker();

            $('#id_db_select').on('change', function () {
                var table = $('#id_table_select');
                table.empty();
                table.append($('<option value="none">-----请选择对应表------</option>'));
                refresh_table();
            });

            function responseHanlder(res) {
                var data = [];

                for (var key in res) {
                    data.push({
                        key: key,
                        value: res[key]
                    });
                }
                return data;
            }
            {% if data %}

                $(function () {

                    var obj = {{ data.table_status|safe }};
                    $('#table_status').bootstrapTable({
                        data: responseHanlder(obj)
                    });
                });
            {% endif %}
        });


    </script>

{% endblock %}